<template>
  <!-- 单个新增学生弹窗 -->
  <el-dialog
    v-model="props.addModule.addVisible"
    :title="props.addModule.addTitle"
    width="30%"
    append-to-body
    center
  >
    <el-form
      :model="props.addModule.addForm"
      label-position="left"
      label-width="auto"
    >
      <el-form-item
        :label="item.label"
        v-for="item in props.addModule.add"
        :required="item.required"
        :key="item.prop"
        class="mb-4"
      >
        <el-input
          v-model="props.addModule.addForm[item.prop]"
          :placeholder="'输入' + item.label"
          :disabled="item.disabled"
          clearable
          v-if="item.type == 'text'"
          style="width: 100%"
          @change="selectChange(item.prop)"
        ></el-input>
        <el-select
          v-model="props.addModule.addForm[item.prop]"
          clearable
          :disabled="item.disabled"
          :placeholder="'选择' + item.label"
          v-else-if="item.type == 'select'"
          style="width: 100%"
          @change="selectChange(item.prop)"
        >
          <el-option
            v-for="cItem in item.options"
            :key="item.valueKey ? cItem[item.valueKey] : cItem"
            :label="item.labelKey ? cItem[item.labelKey] : cItem"
            :value="item.valueKey ? cItem[item.valueKey] : cItem"
          />
        </el-select>
        <el-select
          v-model="props.addModule.addForm[item.prop]"
          multiple
          filterable
          allow-create
          default-first-option
          :reserve-keyword="false"
          :disabled="item.disabled"
          :placeholder="'选择' + item.label"
          v-else-if="item.type == 'createSelect'"
          style="width: 100%"
          @change="selectChange(item.prop)"
        >
          <el-option
            v-for="cItem in item.options"
            :key="item.valueKey ? cItem[item.valueKey] : cItem"
            :label="item.labelKey ? cItem[item.labelKey] : cItem"
            :value="item.valueKey ? cItem[item.valueKey] : cItem"
          />
        </el-select>
        <el-cascader
          v-model="props.addModule.addForm[item.prop]"
          :disabled="item.disabled"
          :placeholder="'选择' + item.label"
          :options="item.options"
          v-else-if="item.type == 'cascader'"
          style="width: 100%"
          @change="selectChange(item.prop)"
        />
        <el-date-picker
          v-model="props.addModule.addForm[item.prop]"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          :disabled="item.disabled"
          :placeholder="'选择' + item.label"
          v-else-if="item.type == 'datetime'"
          style="width: 100%"
          @change="selectChange(item.prop)"
        />
        <el-date-picker
          v-model="props.addModule.addForm[item.prop]"
          type="date"
          value-format="YYYY-MM-DD"
          :disabled="item.disabled"
          :placeholder="'选择' + item.label"
          v-else-if="item.type == 'date'"
          style="width: 100%"
          @change="selectChange(item.prop)"
        />
        <el-date-picker
          v-model="props.addModule.addForm[item.prop]"
          format="YYYY"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="year"
          :disabled="item.disabled"
          :placeholder="'选择' + item.label"
          v-else-if="item.type == 'year'"
          style="width: 100%"
          @change="selectChange(item.prop)"
        />
        <el-input-number
          v-model="props.addModule.addForm[item.prop]"
          :min="1"
          :disabled="item.disabled"
          :placeholder="'选择' + item.label"
          v-else-if="item.type == 'number'"
          style="width: 100%"
          @change="selectChange(item.prop)"
        />
        <el-upload
          ref="uploadRef"
          v-model:file-list="props.addModule.addForm[item.prop]"
          :action="actionUrl + item.action"
          :auto-upload="false"
          accept="image/png, image/jpeg"
          :headers="{ Authorization: getToken() }"
          list-type="picture-card"
          :limit="1"
          :on-exceed="handleExceed"
          :on-change="handleChange"
          :on-success="handleAvatarSuccess"
          v-else-if="item.type == 'upload'"
          style="width: 100%"
        >
          <Plus style="width: 2em; height: 2em" />
          <template #file="{ file }">
            <el-image
              class="w-full h-full px-3 py-6"
              :src="file.url"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[file.url]"
              fit="cover"
            />
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div>
        <el-button type="danger" @click="props.addModule.addVisible = false">
          取消
        </el-button>

        <el-button class="ml-3" type="primary" @click="addInfo">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import { genFileId } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { getToken } from "@/utils/auth.js";

const props = defineProps({
  addModule: Object, // 由父组件传递而来
});

const actionUrl = import.meta.env.DEV
  ? "/api"
  : import.meta.env.VITE_APP_BASEURL;
const exceed = ref(false);
watch(
  () => props.addModule.addVisible,
  (newValue, oldValue) => {
    exceed.value = false;
  }
);

const uploadRef = ref();

function addInfo() {
  if (exceed.value) {
    // console.log(true);
    uploadRef.value[0].submit();
  } else {
    // console.log(false);
    props.addModule.callback();
  }
}

function handleChange(res, files) {
  // console.log(`output->handleChange`, res, files);
  exceed.value = true;
}

function handleExceed(files) {
  if (uploadRef.value !== null && uploadRef.value !== undefined) {
    uploadRef.value[0].clearFiles();
    const file = files[0];
    file.uid = genFileId();
    uploadRef.value[0].handleStart(file);
  }
}

function handleAvatarSuccess(res, file) {
  props.addModule.callback(res, file);
}

//
function selectChange(prop) {
  if (props.addModule.selectcallback) {
    props.addModule.selectcallback(prop);
  }
}
</script>

<style lang="scss" scoped></style>
